{extend name="base" /}
{block name="css"}
<link rel="stylesheet" media="screen" href="{__CSS__}/css/login.css?v={:rand_number()}"/>
{/block}
{block name="body"}
{include file="common/header" /}
<div class="loginwrapper">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title layui-select-none" style="margin-top: 30px;">
    <li>{:__('User login')}</li>
    <li class="layui-this">{:__('User registration')}</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      
<div class="login-wrapper">
                    <form id="login_form" action="" class="layui-form" method="post">
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-username"></i>
            <input class="layui-input" name="username" value="" id="username" placeholder="{:__('Please input')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input class="layui-input" name="password" id="password" value="" placeholder="{:__('Please enter the login password')}" type="password" lay-verType="tips" lay-verify="required" required/>
        </div>
        {if seo('useryzm')=='1'}
                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz"></i>
            <input class="layui-input" name="captcha" id="captcha" placeholder="{:__('Please enter the verification code')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?rand='+Math.random()" class="login-captcha" />
        </div>
       {/if} 
            <div class="layui-form-item">
    <input type="checkbox" name="keeplogin" id="keeplogin" value="1" title="记住登录" lay-skin="primary" checked readonly="readonly"/><i><a style="float: right;" href="/user/emailPwd">{:__('Forget the password')}</a></i>
        </div> 

        <div class="layui-form-item">
        <input type="submit" class="layui-input" id='btn' lay-filter="savesave" lay-submit disabled="disabled" style="cursor:Pointer;" title="{:__('Sign in now')}" value="{:__('Sign in now')}">
        </div>
        <div class="layui-form-item login-oauth-group layui-select-none">
             <a href="javascript:void(0)" id="login" ><i class="layui-icon layui-icon-login-qq" style="color:#3492ed;"></i></a>
        </div>
    </form>
</div>
</div>
    <div class="layui-tab-item">
<div class="login-wrapper">
                  <form id="login_form" class="layui-form" action="" method="post" onsubmit="return false;">
       
                     <input type="hidden" name="verification" value="0" id="verification">
                     <input type="hidden" name="openid" value="{$_GET['openid']?:''}" id="openid">
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-username"></i>
            <input class="layui-input" name="username" id="username" placeholder="{:__('enter one user name')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input class="layui-input" name="password" id="password" placeholder="{:__('Please enter the login password')}" type="password"
                   lay-verType="tips" lay-verify="required" required/>
        </div>
        {if seo('email')=='1'}
         <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-email"></i>
            <input type="text" class="layui-input" name="email" id="email" placeholder="{:__('Please input email')}" autocomplete="off"
                   lay-verType="tips" lay-verify="required" required/>
        </div>
        {/if}
        {if seo('mobile')=='1'}
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-cellphone"></i>
            <input type="text" class="layui-input" name="mobile" id="mobile" placeholder="{:__('Please input mobile phone number')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        {/if}
        {if seo('useryzm')=='1'}
                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz"></i>
            <input type="text" class="layui-input" name="captcha" id="captcha" placeholder="{:__('Please enter the verification code')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?rand='+Math.random()" class="login-captcha" />
        </div>
       {/if}
               
        <div class="layui-form-item">
          <button type="submit" class="layui-btn layui-btn-fluid" lay-filter="saveregister" lay-submit title="{:__('Register now')}">{:__('Register now')}</button>
        </div>
        
    </form>
      </div>  
    </div>
  </div>
</div> 
</div>  
 
{/block}   
{block name="js"}
<script>
      layui.use(['layer', 'form', 'jquery'], function(){
        var layer = layui.layer,
            form  = layui.form,
            $     = layui.jquery;
   $("#login").click(function(){
                            
  layer.open({
        type: 1
        ,anim: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['火速进入', '残忍拒绝']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;border-radius:0px 0px 10px 10px;">QQ登录协议！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
        ,success: function(layero){   
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({ 
            href: '../qqlogin/login'
            ,target: '_blank'
          });
        }
      });
    });  

   $("input").on("input",function(){
             var getname = $("#username").val();
             var getCaptcha = $("#captcha").val();
             var getKeeplogin = $("#Keeplogin").val();
             var getpass = $("#password").val();
 
             $(this).css("color","#232323");
 
             if(getname != '' && getCaptcha != '' && getKeeplogin != '' && getpass != ''){
             $('#btn').attr('disabled', false).css('background','#009688').css('border','none').css('color','#fff') 
               }
             else{ 
             $('#btn').attr('disabled', true).css('background','rgba(0,0,0,20%)').css('border','1px solid #fff').css('color','#232323'); 
    
           }
       });
        //表单提交
         form.on('submit(savesave)', function (data) {
    var index = layer.msg('<i>{:__('Login, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });

    $.ajax({
         url: "{:url('user/login')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});    
//表单提交
         form.on('submit(saveregister)', function (data) {
    var index = layer.msg('{:__('Registration, please wait')}', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });

    $.ajax({
         url: "{:url('user/register')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
});
</script>
{include file="common/footer" /}
{/block}